<template>
    <div class="course">
        <myHeader>
            <template #left></template>
            <template #center>
                <div class="center">特色课</div>
            </template>
            <template #right>
                <div class="right">
                    <i class="iconfont icon-sousuo"></i>
                </div>
            </template>
        </myHeader>
        <van-dropdown-menu>
            <van-dropdown-item title="分类" ref="item">
                <van-cell center>
                    <template #right-icon>
                        <van-button plain type="info">重置</van-button>
                        <van-button color="#eb6100">确认</van-button>
                    </template>
                </van-cell>
            </van-dropdown-item>
            <van-dropdown-item v-model="value" :options="option" title="排序" />
            <van-dropdown-item title="筛选" ref="item">
                <van-cell center>
                    <template #right-icon>
                        <ul>
                            <li @click="tab(0)" :class="{active:tabIndex==0}">全部</li>
                            <li @click="tab(1)" :class="{active:tabIndex==1}">大班课</li>
                            <li @click="tab(2)" :class="{active:tabIndex==2}">小班课</li>
                            <li @click="tab(3)" :class="{active:tabIndex==3}">公开课</li>
                            <li @click="tab(4)" :class="{active:tabIndex==4}">点播课</li>
                            <li @click="tab(5)" :class="{active:tabIndex==5}">面授课</li>
                            <li @click="tab(6)" :class="{active:tabIndex==6}">音频课</li>
                            <li @click="tab(7)" :class="{active:tabIndex==7}">系统课</li>
                            <li @click="tab(8)" :class="{active:tabIndex==8}">图文课</li>
                            <li @click="tab(9)" :class="{active:tabIndex==9}">会员课</li>
                        </ul>
                    </template>
                </van-cell>
            </van-dropdown-item>
        </van-dropdown-menu>
         
        <myList v-for="(item,index) in list" :key="index" :item="item"></myList>
    </div>
</template>

<script>
    import myHeader from '../common/myHeader.vue'
    import myList from './components/myList.vue'
    import { DropdownMenu, DropdownItem, Button, Cell } from 'vant';
    import {characteristic} from '../../request/http.js'
    export default {
        data() {
            return {
                value: "",
                option: [
                    { text: '综合排序', value: 0 },
                    { text: '最新', value: 1 },
                    { text: '最热', value: 2 },
                    { text: '价格从低到高', value: 3 },
                    { text: '价格从高到低', value: 4 },
                ],
                tabIndex:'',
                query:{
                    page:1,
                    limit:5,
                    course_type:'',
                },
                list:[],
            }
        },
        methods: {
            tab(status){
                this.tabIndex = status
            },
            getList(){
                characteristic(this.query).then(res=>{
                    console.log(res)
                    this.list = res.list
                })
            }
        },
        components: {
            myHeader,
            myList,
            [DropdownMenu.name]: DropdownMenu,
            [DropdownItem.name]: DropdownItem,
            [Button.name]: Button,
            [Cell.name]: Cell,
        },
        created() {
            this.getList()
        },
    }
</script>

<style lang="scss" scoped>
    .course{
        padding-bottom: 200px;
    }
    .myHeader {
        .center {
            font-size: 30px;
        }
    }

    .van-cell {
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: #fff;
        padding: 30px 0;

        .van-button {
            width: 284px;
            height: 64px;
        }
    }

    :deep(.van-cell.van-cell--clickable.van-dropdown-item__option) {
        text-align: center !important;
    }

    :deep(.van-cell__value) {
        display: none !important;
    }
    ul{
        width: 100%;
        display: flex;
        justify-content: space-around;
        justify-content: flex-start;
        flex-wrap: wrap;
        li{
            width: 150px;
            height: 70px;
            line-height: 70px;
            text-align: center;
            background-color: #f5f5f5;
            margin: 18px;
        }
        .active{
            background-color: #ebeefe;
            color: red;
        }
    }
</style>